<template>
	<view class="order-detail-info">
		<view class="bg"></view>
		<view class="order-type">			
			<template v-if="orderInfo.status==1">
				<view class="title">待付款</view>				
				<view class="number">订单号：{{orderInfo.order_sn}}</view>
				<view class="btn-con">					
					<view class="btn btn-yellow" @click="payOrder">立即支付</view>
					<view class="btn" @click="cancelOrder">取消订单</view>
				</view>
			</template>
			<template v-if="orderInfo.status==2">
				<view class="title">待消费</view>
				<view class="text">订单支付成功，请你及时使用</view>
				<view class="number">订单号：{{orderInfo.order_sn}}</view>
				<view class="btn-con" >
					<view class="btn" @click="refundOrder">申请退款</view>
				</view>
			</template>
			<template v-if="orderInfo.status==3">
				<view class="title">已关闭</view>
				<view class="text">订单已关闭，请重新下单</view>
				<view class="number">订单号：{{orderInfo.order_sn}}</view>				
			</template>
			<template v-if="orderInfo.status==6">
				<view class="title">退款中</view>
				<view class="text">您的退款申请正在审核中</view>
				<view class="number">订单号：{{orderInfo.order_sn}}</view>
				<view class="btn-con">
					<view class="btn" @click="cancelRefund">取消退款</view>
					<view class="btn" @click="refundInfo">退款详情</view>
				</view>
			</template>
			<template v-if="orderInfo.status==4">
				<view class="title">已退款</view>
				<view class="text">商家同意退款申请，期待您的再次预订</view>
				<view class="number">订单号：{{orderInfo.order_sn}}</view>
				<view class="btn-con">					
					<view class="btn" @click="refundInfo">退款详情</view>
				</view>
			</template>
			<template v-if="orderInfo.status==5">
				<view class="title">已完成</view>
				<view class="text">您的订单已消费，期待您再次预订</view>
				<view class="number">订单号：{{orderInfo.order_sn}}</view>				
			</template>			
		</view>
		<view class="order-info">
			<view class="title">{{orderInfo.product_name}}</view>			
			<!-- 景点 -->
			<template>				
				<view class="date-people-type">
					<text >游玩日期：{{orderInfo.use_date}}</text>
					<text>数量：{{orderInfo.num}}</text>
				</view>
				<!-- <view class="date-people-type">
					<text >上车时间：{{orderInfo.bycar_time}}</text>
					<text>上车地点：{{orderInfo.bycar_place}}</text>
				</view>			 -->	
			</template>			
			<view class="pay-info">
				<view class="left">
					<view class="price"><text class="symbol">￥</text>{{(orderInfo.sell_price * orderInfo.num).toFixed(2)}}</view>					
				</view>				
			</view>
		</view>	
		<view class="module-block" v-if="orderInfo.ticketno && (orderInfo.status == 2 || orderInfo.status == 5)">
			<view class="expense-code info-block">
				<view class="title">消费码</view>
				<view class="group">
					<view class="success-code">
						<image :src="`https://cd.letufx.com/res/vendor/qrcode/make.php?param=${orderInfo.ticketno}`" mode="aspectFill"></image>					
					</view>
					<view class="text">消费码：<text class="number">{{orderInfo.ticketno}}</text></view>
					<view class="num">共有{{orderInfo.num}}张</view>
				</view>
			</view>
		</view>
			
		<view class="module-block">
			<view class="linkman-info info-block">
				<view class="title">联系人信息</view>
				<view class="group">
					<view class="group__item_lr">
						<view class="hd">联系人</view>
						<view class="bd">{{orderInfo.linkman}}</view>
					</view>
					<view class="group__item_lr">
						<view class="hd">手机号</view>
						<view class="bd">{{orderInfo.linkphone}}</view>
					</view>					
				</view>
			</view>
		</view>
	</view>	
</template>

<script>
	import {apiUrl} from '@/api/base.js'
	import {
		get_date_format
	} from '@/utils/utils.js'
	export default {
		data() {
			return {
				order_sn:'',
				orderInfo:{},	
			}
		},
		onLoad(options) {	
			this.order_sn = options.order_sn			
		},
		onShow(){
			if (uni.getStorageSync("userInfo")) {
				this.userInfo = uni.getStorageSync("userInfo")	
			}else{
				uni.navigateTo({
					url: '/pages/my/login'					
				});
			}
			var that = this
			uni.request({
				url: apiUrl + "addons/car/order/getOrder",
				data: {
					order_sn:that.order_sn
				},
				method: "GET",
				success: (res) => {
					that.orderInfo=res.data.data
				},
				fail: (res) => {
					console.log(res)
				}
			})
		},
		methods: {
			payOrder(){
				uni.navigateTo({
					url: '/pages/pay/index?order_sn='+ this.orderInfo.order_sn
				});
			},
			cancelOrder(){
				var that = this
				uni.showModal({
				    title: '温馨提示',
				    content: '你确定要取消订单吗？',
				    confirmText: "确定",
				    cancelText: "返回",
				    success: function (res) {
				        if (res.confirm) {							
				            uni.request({
				            	url: apiUrl + "addons/car/order/cancelOrder",
				            	data: {
				            		order_sn:that.orderInfo.order_sn
				            	},
				            	method: "GET",
				            	success: (res) => {
				            		uni.redirectTo({
				            		         url: '/pages/orders/detail?order_sn='+that.orderInfo.order_sn
				            		    });
				            	},
				            	fail: (res) => {
				            		console.log(res)
				            	}
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			refundOrder(){
				var that = this
				uni.showModal({
				    title: '温馨提示',
				    content: '你确定要申请退款吗？',
				    confirmText: "确定",
				    cancelText: "返回",
				    success: function (res) {
				        if (res.confirm) {							
				            uni.request({
				            	url: apiUrl + "addons/car/order/refundOrder",
				            	data: {
				            		order_sn:that.orderInfo.order_sn
				            	},
				            	method: "GET",
				            	success: (res) => {
				            		uni.redirectTo({
				            		          url: '/pages/orders/detail?order_sn='+that.orderInfo.order_sn
				            		    });
				            	},
				            	fail: (res) => {
				            		console.log(res)
				            	}
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			cancelRefund(){
				var that = this
				uni.showModal({
				    title: '温馨提示',
				    content: '你确定要取消退款申请吗？',
				    confirmText: "确定",
				    cancelText: "返回",
				    success: function (res) {
				        if (res.confirm) {							
				            uni.request({
				            	url: apiUrl + "addons/car/order/cancelRefund",
				            	data: {
				            		order_sn:that.orderInfo.order_sn
				            	},
				            	method: "GET",
				            	success: (res) => {
				            		uni.redirectTo({
				            		         url: '/pages/orders/detail?order_sn='+that.orderInfo.order_sn
				            		    });
				            	},
				            	fail: (res) => {
				            		console.log(res)
				            	}
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			refundInfo(){
				uni.redirectTo({
				         url: '/pages/orders/refund?order_sn='+this.orderInfo.order_sn
				    });
			},
			// 获取日期
			get_date_format(time) {
				return get_date_format(time,"yyyy年MM月dd号 hh:mm:ss");
			}
		}
	}
</script>

<style lang="scss">
	@mixin tinyline {
		content: "";
		display: block;
		height: 2rpx;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		transform: scaleY(.5);
		background-color: #eee;
	}
	.module-block{
		margin: 20rpx 0;
		padding: 0 0rpx;
	}
	.info-block{
		border-radius: 15rpx;
		background-color: $uni-bg-color;
		.title{
			height: 88rpx;
			padding: 0 20rpx;
			line-height: 88rpx;
			position: relative;
			font-size: $uni-font-size-lg;
			font-weight: bold;
			&:after{
				@include tinyline
			}
		}
		.group{
			padding: 0 24rpx;
			font-size: $uni-font-size-base;
		}
		.group__item{
			position: relative;
			&:after{
				@include tinyline
			}
			&:last-child{
				border-bottom: none;
			}
		}
		.group__item_lr{
			display: flex;
			padding:12px 0;
			position: relative;
			&:after{
				@include tinyline
			}
			&:last-child{
				border-bottom: none;
			}
			.hd{
				width: 226rpx;
				flex: 0 0 auto;
			}
			.bd{
				flex: 1 1 auto;
				text-align: left;
				color: #666666;
			}
		}
	}
	.traveller-info{
		.group__item{
			height: 110rpx;
			@extend .directionColumnJustify;
			&>view{
				&:nth-child(2){
					margin-top: 8rpx;
				}
			}
		}
		.checkDetail{
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: $uni-font-size-sm;
			color: $uni-color-primary;
		}
	}
	
	.linkman-info{
		.group__item{
			@extend .justifyspacec;
		}
		.group__item{
			height: 88rpx;
		}
		.remake{
			padding: 15rpx 0;
			line-height: 1.571;
			font-size: $uni-font-size-base;
		}
	}
	.order-detail-info {
		position: relative;
		z-index: 1;
		padding: 0 25rpx;
		margin-bottom: 24rpx;
		font-size: $uni-font-size-sm;
	}
		.bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: -1;
			height: 340rpx;
			background-image: -moz-linear-gradient(95deg, rgb(9, 195, 193) 0%, rgb(95, 206, 126) 100%);
			background-image: -webkit-linear-gradient(95deg, rgb(9, 195, 193) 0%, rgb(95, 206, 126) 100%);
			background-image: -ms-linear-gradient(95deg, rgb(9, 195, 193) 0%, rgb(95, 206, 126) 100%);
		}
	
		.order-type {
			padding-top: 32rpx;
			margin-bottom: 30rpx;
			color: $uni-text-color-inverse;
	
			.title,
			.text {
				margin-bottom: 15rpx;
			}
	
			.title {
				font-size: 48rpx;
			}
	
			.number {
				font-family: "Arial";
			}
	
			.btn-con {
				@extend .displayflex;
				margin-top: 30rpx;
				text-align: center;
			}
	
			.btn {
				@extend .flex1;
				height: 70rpx;
				line-height: 70rpx;
				background-color: rgba(255, 255, 255, .4);
				font-size: $uni-font-size-base;
				border-radius: 5rpx;
	
				&:nth-child(2) {
					margin-left: 20rpx;
				}
	
				&.btn-yellow {
					background-color: #ffc600;
				}
			}
		}
	
		.order-info {
			padding: 32rpx 20rpx 30rpx;
			border-radius: 15rpx;
			box-shadow: 0px 2rpx 10rpx 0px rgba(11, 2, 5, 0.1);
			background-color: $uni-bg-color;
	
			.title {
				margin-bottom: 22rpx;
				line-height: 1.333;
				font-size: 36rpx;
				color: #000;
			}
	
			.types {
				margin-bottom: 25rpx;
				font-size: $uni-font-size-base;
			}
	
			.date-people-type,
			.booking-type {
				font-size: $uni-font-size-sm;
			}
	
			.date-people-type {
				margin-bottom: 50rpx;
				color: $uni-text-color-grey;
				font-family: "Arial";
	
				text {
					&:first-child {
						margin-right: 80rpx;
					}
				}
			}
	
			.pay-info {
				@extend .justifyspacec;
				color: $uni-text-color-grey;
	
				.left {
					@extend .alignItems;
				}
			}
	
			.price {
				color: $uni-text-color-price;
				font-family: "Arial";
				font-size: 40rpx;
	
				.symbol {
					font-size: $uni-font-size-base;
				}
			}
	
			.detail {
				margin-left: 18rpx;
				color: #aaa;
	
				.iconfont {
					position: relative;
					top: 2rpx;
					margin-right: 9rpx;
				}
			}
	
			.types-num {
				@extend .displayflex;
				margin-bottom: 30rpx;
				font-size: $uni-font-size-base;
	
				.name {
					margin-right: 66rpx;
				}
			}
	
			.date-info {
				@extend .displayflex;
				margin-bottom: 20rpx;
				text-align: center;
				font-size: $uni-font-size-base;
	
				.time {
					margin-top: 2rpx;
					font-size: 22rpx;
					color: $uni-text-color-grey;
				}
	
				.start,
				.end {
					margin: 0 16rpx;
				}
	
				.day {
					height: 32rpx;
					padding: 0 13rpx;
					margin: 0 30rpx;
					line-height: 32rpx;
					border-radius: 15rpx;
					font-size: $uni-font-size-mini;
					color: $uni-text-color-deep;
					border: 1rpx solid #bfbfbf;
				}
			}
	
			.types-text {
				margin-bottom: 32rpx;
				font-size: $uni-font-size-mini;
				color: $uni-text-color-grey;
			}
		}
	
	.customize-site{
		margin-bottom: 16rpx;
		.iconfont{
			margin: 0 16rpx;
			color: #474747;
		}
	}
	.num-price{
		margin-bottom: 18rpx;
		font-family: "Arial";
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
		.f{
			margin-right: 70rpx;
		}
	}
	.module-block {
		padding: 0 25rpx;
		margin-bottom: 20rpx;
	}
	
	.info-block {
		border-radius: 15rpx;
		background-color: $uni-bg-color;
	
		.title {
			height: 88rpx;
			padding: 0 20rpx;
			line-height: 88rpx;
			border-bottom: 1rpx solid $uni-border-color;
			font-size: $uni-font-size-lg;
			font-weight: bold;
		}
	
		.group {
			padding: 0 20rpx 40rpx;
			margin-bottom: 40rpx;
			font-size: $uni-font-size-base;
			border-bottom: 1px solid $uni-border-color;
	
			&:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
				border-bottom: none;
			}
		}
	
		.group__item {
			border-bottom: 1rpx solid $uni-border-color;
	
			&:last-child {
				border-bottom: none;
			}
		}
	}
	
	.expense-code {
		padding-bottom: 34rpx;
	
		.title {
			height: 81rpx;
			color: #333;
			border-bottom: none;
		}
	
		.success-code {
			position: relative;
			width: 260rpx;
			height: 260rpx;
			margin: 0 auto 20rpx;
			border: 2rpx solid #cbcbcb;
			border-radius: 15rpx;
	
			image {
				width: 100%;
				height: 100%;
				border-radius: 15rpx;
			}
		}
	
		.sign-icon {
			position: absolute;
			top: 20rpx;
			right: -47rpx;
			width: 141rpx;
			height: 124rpx;
			background: url("https://xcx.zhilvhulian.com/res/static/images/expense-icon.png") no-repeat;
			background-size: contain;
		}
	
		.text {
			text-align: center;
		}
	
		.number {
			font-family: "Arial";
			color: $uni-text-color-grey;
		}
	
		.num {
			margin-top: 12rpx;
			text-align: center;
			color: $uni-text-color-grey;
			font-size: $uni-font-size-sm;
		}
	}
</style>
